<template>
  <view class="chat-container">
    <BackButton />
    <!-- 顶部导航栏 -->
    <view class="header">
      <!-- 新增：用户状态图片 -->

      <!-- 用户信息区域 -->
      <view class="user-info">
        <view class="user-text">
          <text class="title">{{ otherUserName }}</text>
          <text class="subtitle">{{ jobInfo.subtitle }}</text>
        </view>
      </view>
    </view>

    <!-- 新增：兼职信息栏 -->
    <view class="job-info-bar" style="background-color: white;">
      <view class="job-header">
        <!-- 新增：用户状态图片 -->
        <view class="job-status">{{ jobInfo.status }}</view>
        <image class="user-status" :src="getFullImageUrl(jobInfo.statusImage)"></image>
        <view class="job-title">{{ jobInfo.title }}</view>
        <view class="job-salary">{{ jobInfo.salary }}</view>
      </view>
      <view class="job-details">
        <text class="detail-item">{{ jobInfo.people_num }} | {{ jobInfo.person_req }}</text>
        <text class="detail-item">{{ jobInfo.start_time }}-{{ jobInfo.end_time }}</text>
        <text class="detail-item">{{ jobInfo.skill_desc }}</text>
      </view>
      <view class="job-location">
        <text class="distance-text">{{ jobInfo.address }}</text>
        <text class="distance-text">{{ jobInfo.distance }} | {{ jobInfo.duration }}</text>
        <image class="share-icon" src="/static/image/share.png"></image>
      </view>
    </view>

    <!-- 聊天消息区域 -->
    <scroll-view class="chat-messages" ref="chatMessages" scroll-y="true" 
      :scroll-into-view="scrollToView" scroll-with-animation="true"
      :style="{ height: windowHeight + 'px' }">

      <!-- 对方消息 -->
      <view v-for="(msg, index) in messages" :key="index" class="message-item"
        :class="{ 'other-message': !msg.isMine, 'my-message': msg.isMine }" :id="'message' + index"> <!-- 添加ID绑定 -->

        <!-- 对方头像 - 移到内容左侧 -->
        <image v-if="!msg.isMine" class="avatar" :src="msg.sender_avatar" style="position: relative;top: 50px"></image>

        <view class="message-content" style="margin-right: -30rpx;">
          <!-- 调整：时间戳位置 -->
          <view class="message-time">{{ msg.time }}</view>
          <view class="message-bubble">
            {{ msg.content }}
          </view>
        </view>

        <!-- 自己头像 - 保持在右侧 -->
        <image v-if="msg.isMine" class="avatar" :src="msg.sender_avatar"></image>
      </view>
     </scroll-view>

    <!-- 输入区域 -->
    <view class="input-area">
      <!-- 新增：表情按钮 -->
      <image class="emoji-btn" src="/static/image/emoji.png" @click="showEmoji"></image>
      <input type="text" v-model="inputMessage" class="message-input" placeholder="请输入消息..." @confirm="sendMessage" />
      <button class="send-btn" @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script src="./chat-detail.js"></script>
<style lang="scss" src="./chat-detail.scss"></style>